<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg.toUpperCase().split(' ').reverse().join(' ')}}</p>
    <p>{{reverseMsg}}</p>
    <button @click="msg = 'Hello Vue'">修改msg的值</button>
    <p>{{num}}</p>
    <p>{{doubleNum}}</p>
    <!--
        无法直接修改计算属性的值
        想要修改计算属性的值
        需要通过计算属性的set方法进行实现
        set方法的参数即为修改后的计算属性的值
    -->
    <button @click="doubleNum = 30">修改doubleNum的值</button>
</div>
</body>
<script>
    new Vue({
        el: "#d1",
        data:{
            msg: "welcome to vue",
            num: 10
        },computed:{
            // 直接给function作为值
            // 默认是使用了计算属性的get方法
            reverseMsg:function(){
                return this.msg.toUpperCase().split(' ').reverse().join(' ');
            },
            doubleNum:{
                get:function(){
                    return this.num*2;
                },
                set:function(value){
                    // 修改时,只能对数据仓库中的数据进行操作
                    // 无法直接操作计算属性
                    // 但是只要数据仓库的数据发生了改变
                    // 对于计算属性而言,其会随之改变
                    // this.doubleNum = value;
                    // 由于set方法的参数的值是传递过来的计算属性的值
                    // 因此,为数据仓库中的数据重新赋值时,需要反过来计算
                    this.num = value / 2;
                }
            }
        }
    })
</script>
</html>